<template>
  <!-- 分页 -->
  <div style="margin-top: 20px">
    <el-pagination
      v-model:currentPage="_page"
      v-model:page-size="_limit"
      :page-sizes="[5, 10, 20, 30, 40, 50]"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    />
  </div>
  <el-backtop :right="100" :bottom="100" target=".el-main" ref="backtop" />
</template>

<script>
export default {
  emits: ["changeReq"],
  props: {
    page: Number, //跳转页数
    limit: Number, //显示条数
    total: Number, //总页数
  },
  data() {
    return {
      _page: this.page,
      _limit: this.limit,
    };
  },
  watch: {
    _limit() {
      let pageMax = Math.ceil(this.total / this._limit);
      if (this._page <= pageMax) {
        this.change();
      }
    },
    _page() {
      this.change();
      this.$nextTick(() => {
        this.$refs.backtop.$el.click?.();
      });
    },
  },
  methods: {
    change() {
      this.$emit("changeReq", {
        page: this._page,
        limit: this._limit,
      });
    },
  },
};
</script>

<style></style>
